<template>
	<div>
		<div class="payheader_div">
			<span  class="btn_back" @click="btn_back">返回</span>
			订单
		</div>
		<mt-navbar class="goodinfo_header">
			<mt-tab-item id="1" class="colorA9" :class="active === 'ALL'?'color32':''" @click.native.prevent="active = 'ALL'">全部</mt-tab-item>
			<mt-tab-item id="2" class="colorA9" :class="active === 'DFK'?'color32':''" @click.native.prevent="active = 'DFK'">待付款</mt-tab-item>
			<mt-tab-item id="3" class="colorA9" :class="active === 'DXF'?'color32':''" @click.native.prevent="active = 'DXF'">待消费</mt-tab-item>
			<mt-tab-item id="4" class="colorA9" :class="active === 'DPJ'?'color32':''" @click.native.prevent="active = 'DPJ'">待评价</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="active" :bindaOne="allOrderListAll" :bindTwo="allOrderListDFK" :bindThree="allOrderListDXF" :bindFour="allOrderListDPJ">
			<mt-tab-container-item id="ALL">
				<orderline-com :orderlist="O_LIST"></orderline-com>
			</mt-tab-container-item>
			<mt-tab-container-item id="DFK">
				<orderline-com :orderlist="O_LIST"></orderline-com>
			</mt-tab-container-item>
			<mt-tab-container-item id="DXF">
				<orderline-com :orderlist="O_LIST"></orderline-com>
			</mt-tab-container-item>
			<mt-tab-container-item id="DPJ">
				<orderline-com :orderlist="O_LIST"></orderline-com>
			</mt-tab-container-item>
		</mt-tab-container>
		<footer-com></footer-com>
	</div>
</template>
<script>
	import orderline from './orderline.vue'
	import footer from '../footer/footer.vue'
	export default{
		name: 'order',
		data(){
			return {
				active:'ALL',
				O_LIST:{},
			}
		},
		beforeRouteEnter:function(to,from,next){
			if(to.path == '/order'){// 判断上一页路由来源， 如果为首页，设置当前要请求首页的接口， 如果为监控，...
				next(function(vm){
					//console.log(vm)
					vm.$store.state.routerIndex = false;
					vm.$store.state.routerDis = false;
					vm.$store.state.routerOrder = true;
					vm.$store.state.routerMine = false;
					
				});
				//vm.$store.state._dispatchType = 'index';
				//vm.dispatchType = 'index';
			}
		},
		components:{
			"orderline-com":orderline,
            "footer-com": footer,
        },
        methods:{
        	btn_back:function(){
				this.$router.go(-1);
			},
        },
         computed:{
        	allOrderListAll(){
        		var _res = this.$store.state.order.orderList;
        		this.O_LIST = _res;
        		return this.$store.state.order.orderList;
        	},
        	allOrderListDFK(){
        		var _res = this.$store.state.order.orderList;
        		this.O_LIST = _res;
        		return this.$store.state.order.orderList;
        	},
        	allOrderListDXF(){
        		var _res = this.$store.state.order.orderList;
        		this.O_LIST = _res;
        		return this.$store.state.order.orderList;
        	},
        	allOrderListDPJ(){
        		var _res = this.$store.state.order.orderList;
        		this.O_LIST = _res;
        		return this.$store.state.order.orderList;
        	}
        },
        mounted:function(){
        	//全部订单列表
        	this.$store.dispatch('get_orderList');
        },
         watch:{
        	// 目的地推荐切换
        	active(curVal,oldVal){
        		if(curVal == "ALL"){
        			this.O_LIST = this.$store.state.order.orderLlistAll;
        		}else if(curVal == "DFK"){
        			this.O_LIST = this.$store.state.order.orderLlistDFK;
        		}else if(curVal == "DXF"){
        			this.O_LIST = this.$store.state.order.orderLlistDXF;
        		}else if(curVal == "DPJ"){
        			this.O_LIST = this.$store.state.order.orderLlistDPJ;
        		}
        	}
        }
	}
</script>
<sctyle rel="stylesheet" scoped>
	
</style>